<template>
	<view class="orders-component">
		<view class="orders-header">
			<uv-tabs
				:list="tabList"
				:scrollable="false"
				lineWidth="28"
				lineHeight="4"
				lineColor="#ffe100"
				keyName="title"
				:inactiveStyle="{
					fontSize: '28rpx',
					color: '#777777'
				}"
				:activeStyle="{
					fontSize: '28rpx',
					color: '#2c2c2c'
				}"
				class="orders-header-tabs"
				@change="change"
			/>
		</view>
		<view class="orders-body">
			<scroll-view
				scroll-y="true"
				class="orders-scroll-view"
				@scrolltolower="$emit('load')"
			>			
				<hsb-business-order-list
					:list="orderList"
					@order="$emit('order', $event)"
				/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		tabList: Array,
		orderList: Array,
		active: String
	},
	// options: {
	// 	/*
	// 	 * 修改微信小程序自定义组件样式
	// 	 * https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
	// 	*/
	// 	styleIsolation: 'shared'
	// },
	methods: {
		change (event) {
			this.$emit('change', event)
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>